import { useEffect, useRef } from 'react';
import * as echarts from 'echarts'

const BarChart = ({title}) => {
  const chartsRef = useRef(null)
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chartsRef.current)
    const option = {
      title:{
        text:title
      },
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    }
    // 绘制图表
    myChart.setOption(option);

  }, [title])
  return (
  
      <div ref={chartsRef} style={{ height: '500px', width: '500px' }}></div>
    
  )
}
export default BarChart